import { Button, Popover, Space } from "antd";
import { IssueList as IssueInfoList } from "./issue";
import { min_app_shell } from '@linksaas-minapp/api';

export interface IssueListProps {
    issueList: string[];
}

export default function IssueList(props: IssueListProps) {
    return (
        <Space direction="vertical">
            {IssueInfoList.filter(item => props.issueList.includes(item.id)).map(item => (
                <Popover key={item.id} placement="right" content={
                    <div>
                        <h3>{item.id}({item.name})</h3>
                        <p>{item.descCn}</p>
                        <p>{item.descEn}</p>
                        <div style={{ display: "flex", justifyContent: "flex-end" }}>
                            <Button type="link" onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                min_app_shell.openBrowser(item.url);
                            }}>查看详情</Button>
                        </div>
                    </div>
                }><a>{item.id}({item.name})</a></Popover>
            ))}
        </Space>
    );
}